<template>
  <el-card style="width: 100%;" class="Comment">
    <template #header>
      <div class="header">
        <span>社区管理</span>

      </div>
    </template>
    <el-table :data="invitationData" stripe style="width: 100%" v-loading.fullscreen.lock="loadingfalg"
      >
      <template #empty>
        <el-empty description="无数据"></el-empty>
      </template>
      <el-table-column type="index" width="50" />
      <el-table-column label="用户名" align="center" width="130">
        <template #default="scope">
          <text><span style="color: rgb(37, 157, 255);">{{ scope.row.nickname }}</span></text>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="create_time" label="时间" min-width="120" />
      <el-table-column label="帖子内容" width="280">
        <template #default="scope">
          <div style="height: 120px; overflow: auto;"><text>{{ scope.row.content }}</text></div>
        </template>
      </el-table-column>
      <el-table-column label="图片" width="200" align="center">
        <template #default="scope">
          <el-image v-if="scope.row.is_img" preview-teleported style="width: 100px; height: 100px;"
            :preview-src-list="previewList(scope.row.url_list)" :src="scope.row.url_list[0].url"
            fit="cover"></el-image>
          <el-empty v-else description="无图片" image-size="40"></el-empty>
        </template>
      </el-table-column>
      <el-table-column label="点赞量" align="center" min-width="120">
        <template #default="scope">
          <div style="display: flex; align-items: center;justify-content: center;">
            <el-icon color="rgb(37, 157, 255)">
              <timer />
            </el-icon>
            <span style="margin-left: 10px">{{ scope.row.like }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="评论量" align="center" min-width="120">
        <template #default="scope">
          <div style="display: flex; align-items: center;justify-content: center;">
            <el-icon color="rgb(37, 157, 255)">
              <timer />
            </el-icon>
            <span style="margin-left: 10px">{{ scope.row.comment_num }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button plain type="primary" :icon="Edit"  size="small" @click="clickRow(scope.$index)"
          ></el-button
        >
          <el-button plain type="danger" :icon="Delete" size="small"
            @click="deleteIntitation(scope.$index)"></el-button>
        </template>
      </el-table-column>


    </el-table>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" v-model:current-page="page_data.page_num"
        v-model:page-size="page_data.page_size" :total="page_data.page_count * page_data.page_size"
        @current-change="currentChange" />
    </div>
  </el-card>


  <el-dialog v-model="alterdailog" title="帖子详情" width="525" align-center :row-class-name="RowClassName">
    <div class="boxs">

      <div class="item-box" v-for="(item, index) in invitationDatas" :key="index">
        <div class="user-box">
          <div class="user-img" :style="`--url:url(${item.user_img})`"></div>
          <div class="user-text">
            <div class="user-name">{{ item.nickname }}</div>
            <div class="user-time">{{ createTime(item.create_time) }}</div>
          </div>
          <div class="follow">
            <!-- <el-icon color='#DB426D' :size='21'>
              <Delete />
            </el-icon> -->
          </div>
        </div>
        <div class="content">
          <div class="text">{{ item.content }}</div>
          <div v-if="item.is_img" class="img-box">
            <!-- 1 -->
            <div v-if="item.url_list.length == 1" class="content-img" :style="`--url:url(${item.url_list[0].url})`">
            </div>
            <!-- 2 -->
            <div v-else-if="item.url_list.length == 2 || item.url_list.length == 4"
              v-for="(itemImg, imgindex) in item.url_list" :key="imgindex" class="content-img twoimg"
              @click="privewImg(itemImg.url, item.url_list)" :style="`--url:url(${itemImg.url});`"></div>
            <!-- 3 -->
            <div v-else-if="item.url_list.length == 3" class="three-box">
              <div class="content-img three-one" @click="privewImg(item.url_list[0].url, item.url_list)"
                :style="`--url:url(${item.url_list[0].url})`"></div>
              <div class="right">
                <div class="content-img three-two" @click="privewImg(item.url_list[1].url, item.url_list)"
                  :style="`--url:url(${item.url_list[1].url})`"></div>
                <div class="content-img three-three" @click="privewImg(item.url_list[2].url, item.url_list)"
                  :style="`--url:url(${item.url_list[2].url})`"></div>
              </div>
            </div>
            <!-- 5 -->
            <div v-else v-for="(itemImg, imgindex) in item.url_list" class="content-img threeimg"
              :style="`--url:url(${itemImg.url});`"></div>
          </div>
        </div>
        <div class="footer">
          <div class="left">
            <!-- <uni-icons @click="showCopy(item.id)" type="undo" color="rgba(51, 51, 51, .6)" size="28" /> -->
          </div>
          <div class="right">
            <div class="r">

              <img style="height: 20px;height: 20px;" src="@/assets/like.png" alt="">
              <div class="like_num">{{ item.like ? item.like : '' }}</div>
            </div>
            <div class="l">

              <el-icon color="#000" :size='21'>
                <ChatDotSquare />
              </el-icon>
              <!-- <uni-icons @click="commentmsg(item.id,item.comment_num)" type="chat" color="rgba(51, 51, 51, .6)" size="28" /> -->
              <div class="comment_nums">{{ item.comment_num ? item.comment_num : ' ' }}</div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="box">
      <div class="header">
        <div class="text">{{ rowCommentNum }}条评论</div>
      </div>
      <div class="mid">
        <div class="item-box" v-for="(item, index)  in commentData" :key="index">
          <div class="left">
            <div class="user-img" :style="`--url:url(${item.user_img})`">

            </div>
          </div>
          <div class="right">
            <div class="user-name">{{ item.nickname }}
              <div class="delete">
                <el-icon @click="deleteComment(item.comment_id, -1, index)" color='#DB426D' :size='21'>
                  <Delete />
                </el-icon>
              </div>
            </div>
            <div class="content">{{ item.comment }}</div>
            <div class="content-img" v-if="item.url" :style="`--url:url(${item.url})`"></div>
            <div class="feature-box">
              <div class="left">
                <div class="create_time">{{ createTime(item.create_time) }}</div>
                <!-- <div class="reply" >回复</div> -->
              </div>
              <div class="right">
                <img style="height: 20px;height: 20px;" src="@/assets/like.png" alt="">

                <div class="like_num">{{ item.like ? item.like : '' }}</div>
              </div>
            </div>
            <div class="reply-box" v-if="item.show_type" v-for="(ritem, rindex) in item.children" :key="rindex">
              <div class="left">
                <div class="user-img" :style="`--url:url(${ritem.user_img})`"></div>
              </div>
              <div class="right">
                <div class="user-name">

                  <span>{{ ritem.nickname }}</span><span>{{ ritem.to_nickname }}</span>
                  <div class="delete">
                    <el-icon @click="deleteComment(ritem.comment_id, rindex, index)" color='#DB426D' :size='21'>
                      <Delete />
                    </el-icon>
                  </div>
                </div>
                <div class="content">{{ ritem.comment }}</div>
                <div v-if="ritem.url != null" class="content-img" :style="`--url:url(${ritem.url})`"></div>
                <div class="feature-box">
                  <div class="left">
                    <div class="create_time">{{ createTime(ritem.create_time) }}</div>
                    <!-- <div class="reply">回复</div> -->
                  </div>
                  <div class="right">
                    <img style="height: 20px;height: 20px;" src="@/assets/like.png" alt="">
                    <div class="like_num">{{ ritem.like ? ritem.like : '' }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottom" v-if="item.son_num != 0">
              <div class="more" @click="showMore(index, item.comment_id)"
                v-if="item.page_size * item.page_num < item.son_num">展开更多</div>
              <div class="packup" v-if="item.show_type" @click="puckup(index)">收起</div>
            </div>
          </div>

        </div>

      </div>


    </div>


  </el-dialog>

</template>
<script setup lang="ts">
import 'element-plus/dist/index.css'
import { ElMessage } from 'element-plus'
import { ref, computed } from 'vue'
import {
  Delete,
  Edit,
  ChatDotSquare
} from '@element-plus/icons-vue'
import { getCommentApi, getInvitationApi, deleteInvitationApi, deleteCommentapi } from '@/api/community'
const invitationDatas = ref('')
//删除评论
const deleteComment = async (comment_id, rindex = -1, index) => {
  const res = await deleteCommentapi({ comment_id: comment_id })
  if (res.code == 200) {
    ElMessage.success('删除成功')
    if (rindex == -1) {
      commentData.value.splice(index, 1)
    }
    else {
      commentData.value[index].children.splice(rindex, 1)
    }
  }
  else {
    ElMessage.error(res.errmsg)
  }
}

const showMore = async (index, parent_id) => {
  commentData.value[index].show_type = true
  commentData.value[index].page_num += 1
  console.log(commentData.value[index].page_num, commentData.value[index].page_count);
  if (commentData.value[index].page_num <= commentData.value[index].page_count) {

    const res = await getCommentApi({
      page_size: commentData.value[index].page_size,
      page_num: commentData.value[index].page_num,
      invitation_id: invitationID.value,
      parent_id: parent_id
    })
    if (res.code == 200) {
      commentData.value[index].page_count = res.data.count
      commentData.value[index].children.push(...res.data.list)
    }
    else {
      ElMessage.error(res.errmsg)
    }

  }
}
const puckup = (index) => {
  commentData.value[index].show_type = false
  commentData.value[index].page_num = 0
}
const createTime = computed(() => (date) => {
  const nowdate = new Date()
  const createdate = new Date(date)
  const S = Math.ceil(Math.abs(nowdate - createdate) / 1000)
  if (S < 60) {
    return S + '秒前'
  }
  if (S / 60 < 60) {
    return Math.ceil(S / 60) + '分钟前'
  }
  if (S / 3600 < 24) {
    return Math.ceil(S / 3600) + '小时前'
  }
  if (S / 3600 / 24 < 24 * 4) {
    return Math.ceil(S / 3600 / 24) + '天前'
  }
  else {
    return date.split(" ")[0]
  }
})

const commentData = ref([
  {
    comment_id: 1,
    user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
    nickname: '打赏的',
    create_time: '2024-03-23 12:00:34',
    user_id: 1,
    comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
    url: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
    like: 1231,
    like_type: false,
    page_num: 1,
    page_size: 4,
    son_num: 3,
    show_type: false,

    page_count: 10,
    children: [
      {
        comment_id: 34,
        user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nickname: '打赏的',
        to_nickname: '的撒开',
        create_time: '2024-03-23 12:00:34',
        user_id: 3,
        comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like: 1231,
        like_type: false,
      },
      {
        comment_id: 34,
        user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nickname: '地方撒',
        to_nickname: '打赏的',
        create_time: '2024-03-23 12:00:34',
        user_id: 7,
        comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like: 0,
        like_type: false,
      },
      {
        comment_id: 40,
        user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nickname: '地方撒',
        to_nickname: '打赏的',
        create_time: '2024-03-20 12:00:34',
        user_id: 7,
        url: '',
        comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰',
        like: 1,
        like_type: true,
      }
    ]

  },
  {
    comment_id: 4,
    user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
    nickname: '打赏的',
    create_time: '2024-03-23 12:00:34',
    user_id: 7,
    comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
    url: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
    like: 1231,
    like_type: false,
    show_type: false,
    page_num: 0,
    page_size: 4,
    page_count: 10,
    son_num: 2,
    children: [
      {
        comment_id: 34,
        user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nickname: '打赏的',
        to_nickname: '的撒开',
        create_time: '2024-03-23 12:00:34',
        user_id: 3,
        comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url: '',
        like: 1231,
        like_type: false,
      },
      {
        comment_id: 34,
        user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nickname: '地方撒',
        to_nickname: '',
        create_time: '2024-03-23 12:00:34',
        user_id: 7,
        comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like: 0,
        like_type: false,
      },
      {
        comment_id: 40,
        user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nickname: '地方撒',
        to_nickname: '打赏的',
        create_time: '2024-03-20 12:00:34',
        url: '',
        user_id: 7,
        comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰',
        like: 1,
        like_type: true,
      }
    ]

  },
  {
    comment_id: 4,
    user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
    nickname: '打赏的',
    create_time: '2024-03-23 12:00:34',
    user_id: 7,
    comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
    url: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
    like: 1231,
    like_type: true,
    show_type: false,
    page_num: 1,
    page_size: 4,
    page_count: 10,
    son_num: 0,
    children: [
      {
        comment_id: 34,
        user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nickname: '打赏的',
        to_nickname: '的撒开',
        create_time: '2024-03-23 12:00:34',
        user_id: 3,
        comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like: 1231,
        like_type: false,
      },
      {
        comment_id: 34,
        user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nickname: '地方撒',
        to_nickname: '打赏的',
        create_time: '2024-03-23 12:00:34',
        user_id: 7,
        comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like: 0,
        like_type: false,
      },
      {
        comment_id: 40,
        user_img: 'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nickname: '地方撒',
        to_nickname: '打赏的',
        create_time: '2024-03-20 12:00:34',
        user_id: 7,
        comment: '的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰',
        like: 1,
        like_type: true,
      }
    ]

  },
])
const invitationID = ref('')
const alterdailog = ref(false)
const C_page_data = ref({
  page_num: 1,
  page_size: 10,
  page_count: 0
})
const RowClassName = ({ row, rowIndex }) => {
  row.index = rowIndex
}
const rowCommentNum = ref('')
const clickRow = async (index) => {
  alterdailog.value = true
  loadingfalg.value = true
  invitationID.value = invitationData.value[index].id
  rowCommentNum.value = invitationData.value[index].comment_num
  const res = await getCommentApi({
    invitation_id: invitationID.value,
    page_size: C_page_data.value.page_size,
    page_num: C_page_data.value.page_num,
    parent_id: ""
  })
  commentData.value = res.data.list
  commentData.value = commentData.value.map(item => { return { ...item, page_size: 10, page_num: 0, page_count: 10, children: [] } })
  invitationDatas.value = [invitationData.value[index]]
  loadingfalg.value = false
}
const deleteIntitation = async (index) => {
  const res = await deleteInvitationApi({
    invitation_id: invitationData.value[index].id
  })
  if (res.code == 200) {
    ElMessage.success('删除成功')
  }
  else {
    ElMessage.error(res.errmsg)
  }
}
const currentChange = async (num) => {
  page_data.value.page_num = num
  loadingfalg.value = true
  const res = await getInvitationApi(page_data.value)
  invitationData.value = res.data.list
  page_data.value.page_count = res.data.count
  loadingfalg.value = false

}
const previewList = computed(() => (arr) => {
  const res_arr = []
  for (let i = 0; i < arr.length; i++) {
    res_arr.push(arr[i].url)
  }
  return res_arr
})
const loadingfalg = ref(false)
//页数
const page_data = ref({
  page_num: 1,
  page_size: 10,
  page_count: 4
})
//帖子数据
const invitationData = ref([
  {
    user_img: 'https://www.damer.asia//group1/M00/00/0D/CgAICGYHscKAUaAdAAV7XXt5NTM1..jpeg',
    id: 1,
    nickname: '大大大',
    create_time: '2020-02-02',
    is_img: true,
    content: '打扫垃圾发打开拉萨打开拉萨发就打开拉萨发就打开拉萨发就打开拉萨就放得开了撒附近的斯科拉发',
    url_list: [
      {
        id: 1,
        url: 'https://www.damer.asia/group1/M00/00/01/CgAICGVKDBiAf_nmAAE_NE1Z1-k4292974.jpg'
      },
      {
        id: 2,
        url: 'https://www.damer.asia//group1/M00/00/0D/CgAICGYHscKAUaAdAAV7XXt5NTM1..jpeg'
      }
    ],
    like: 100,
    comment_num: 100,
    is_follow: false,
    user_id: 1
  },
  {
    user_img: 'https://www.damer.asia//group1/M00/00/0D/CgAICGYHscKAUaAdAAV7XXt5NTM1..jpeg',
    id: 2,
    nickname: '大大大',
    create_time: '2020-02-02',
    is_img: true,
    content: '打扫垃圾发打开拉萨打开拉萨发就打开拉萨发就打开拉萨发就打开拉萨就放得开了撒附近的斯科拉发',
    url_list: [
      {
        id: 1,
        url: 'https://www.damer.asia//group1/M00/00/0D/CgAICGYHscKAUaAdAAV7XXt5NTM1..jpeg'
      },
      {
        id: 2,
        url: 'https://www.damer.asia//group1/M00/00/0D/CgAICGYHscKAUaAdAAV7XXt5NTM1..jpeg'
      }
    ],
    like: 100,
    comment_num: 100,
    is_follow: false,
    user_id: 1
  },
])
//初始化
const getInvitationData = async () => {
  loadingfalg.value = true
  loadingfalg.value = true
  const res = await getInvitationApi(page_data.value)
  invitationData.value = res.data.list.map((item, index) => { return { index: index, ...item } })
  page_data.value.page_count = res.data.count
  loadingfalg.value = false

}
getInvitationData()
</script>

<style lang='scss'>
* {
  user-select: none;
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 40px 0px;
}

.dailog-box {}

.boxs {
  padding-top: 28.846px;
  margin: 0px 30.769px;

  .item-box {
    margin-bottom: 13.462px;
    border-bottom: .5px solid rgba(51, 51, 51, .2);

    .user-box {
      display: flex;
      align-items: center;

      .user-img {
        --url: url(https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080);
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-image: var(--url);
        background-position: center;
        background-size: cover;
      }

      .user-text {
        margin-left: 10px;

        .user-name {
          color: rgba(51, 51, 51, 1);
          font-size: 15px;
          font-weight: 500;
        }

        .user-time {
          margin-top: 3px;
          color: rgba(51, 51, 51, .6);
          font-size: 15px;
          font-weight: 400;
        }
      }

      .follow {
        display: flex;
        justify-content: flex-end;
        flex-grow: 1;

        .text {
          height: 42.308px;
          padding: 0 19.231px;
          color: #fff;
          font-size: 18px;
          text-align: right;
          border-radius: 57.692px;
          letter-spacing: 0.05em;
          line-height: 42.308px;
          background-color: #24edc2;
          // border: 1px solid rgba(51, 51, 51, .7);

        }

        .follow-click {
          color: rgba(51, 51, 51, .5);
          font-size: 20px;
          border-radius: 57.692px;
          border: 1px solid rgba(51, 51, 51, .3);
          background-color: rgba(51, 51, 51, 0);

        }

      }
    }

    .content {
      .text {
        margin: 8px 0 5px;
        color: rgba(51, 51, 51, 1);
        font-size: 18px;
        font-family: 400;
        line-height: 22px;
      }

      .img-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .content-img {
          --url: url(https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080);
          width: 100%;
          height: 300px;
          border-radius: 19.231px;
          background-image: var(--url);
          background-position: center;
          background-size: cover;
          margin-bottom: 8px;
        }

        .twoimg {
          width: 210px;
          height: 210px;
        }

        .threeimg {
          width: 225px;
          height: 225px;
          margin-bottom: 5.769px;
        }

        .three-box {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .three-one {
            width: 280px;
            height: 285px;
            border-radius: 19.231px 0 0 19.231px;
          }

          .right {
            .three-two {
              width: 135px;
              height: 135px;
              border-radius: 0 19.231px 0 0;
              margin-bottom: 5px;

            }

            .three-three {
              width: 135px;
              height: 135px;
              border-radius: 0 0 19.231px 0;
            }
          }

        }
      }
    }

    .footer {
      display: flex;
      align-items: center;
      padding: 15px 0;

      .left {
        flex-grow: 1;

        .show {
          width: 48px;
        }
      }

      .right {
        min-width: 150px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .r {
          width: 50%;
          display: flex;
          align-items: center;
        }

        .l {
          width: 50%;
          align-items: center;
          justify-content: center;
          display: flex;
        }

        .like {
          width: 48px;
          transform: translateY(-3.923px);
        }

        .like_num {
          margin: 0 9.615px;
          color: rgba(51, 51, 51, .7);
        }

        .comment {
          width: 48px;
          margin-left: 48px;
          margin-right: 9.615px;
        }

        .comment_nums {
          min-width: 57.692px;
          color: rgba(51, 51, 51, .7);
        }
      }
    }
  }
}

.box {
  max-height: 800px;
  overflow: auto;
  margin: 0 2px;

  &::-webkit-scrollbar {
    display: none;
  }

  .header {
    position: sticky;
    z-index: 99;
    top: -1px;
    margin: 0;
    padding: 15px 0;
    width: 100%;
    background-color: #FFF;

    .text {
      text-align: center;
      color: #161823;
      font-size: 16px;
      font-weight: 550;
      letter-spacing: .02em;
    }
  }

  .mid {
    .item-box {
      display: flex;

      .left {
        .user-img {
          --url: url(https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080);
          width: 45px;
          height: 45px;
          border-radius: 50%;
          background-image: var(--url);
          background-position: center;
          background-size: cover;
        }
      }

      .right {
        flex-grow: 1;

        margin-left: 8px;
        color: #afb0b4;
        font-size: 15px;
        line-height: 15px;
        letter-spacing: .03em;

        .user-name {
          position: relative;

          .delete {
            position: absolute;
            right: 5px;
            top: 15px;
          }
        }

        .content {
          width: 90%;
          margin: 2px 0;
          color: #161823;
          font-size: 18px;
          line-height: 20px;
        }

        .content-img {
          --url: url(https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080);
          max-width: 320.513px;
          max-height: 320.513px;
          min-height: 240.385px;
          min-width: 240.385px;
          border-radius: 6.41px;
          background-image: var(--url);
          background-position: center;
          background-size: cover;
        }

        .feature-box {
          width: 100%;
          display: flex;
          align-items: center;
          margin: 12.231px 0 12.846px;

          .left {
            display: flex;
            align-items: center;
            flex-grow: 1;

            .create_time {}

            .reply {
              margin-left: 35.256px;
              font-weight: 550;
              color: #85868c;
            }
          }

          .right {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .like {
              margin-right: 6.641px;
              width: 32.051px;
              height: 32.051px;
            }

            .like_num {}
          }
        }

        .reply-box {
          display: flex;

          .left {
            .user-img {
              width: 38.462px;
              height: 38.462px;
            }
          }

          .right {
            .user-name {
              position: relative;
              display: flex;
              align-items: center;
              margin-top: 5px;
              font-size: 15px;

              .name-img {
                width: 29.436px;
                height: 29.436px;
              }

              .delete {
                position: absolute;
                right: 16px;
                top: 0;
              }
            }

            .content {
              font-size: 18px;
            }

          }
        }

        .bottom {
          display: flex;
          color: #85868c;
          margin-bottom: 35.846px;
          // font-size: 28.846px;
          font-weight: 550;

          .more {
            &::before {
              content: '—';
              color: #afb0b4;
            }

            .more-img {
              margin-left: 2.923px;
              transform: translateY(3.641px);
              width: 28.846px;
            }
          }

          .packup {
            margin-left: 57.692px;

            .packup-img {
              margin-left: 2.923px;
              transform: translateY(3.641px);
              width: 28.846px;
            }
          }
        }
      }
    }
  }
}
</style>